<template>
	<view class="mycenterSale">
		<view class="mycenterSaleHead">
			<view class="mycenterSaleHeadBox">
				<view class="mycenterSaleHeadBoxHead">
					累计销售额(元)
				</view>
				<view class="mycenterSaleHeadBoxMoney">
					{{moneyAll}}
				</view>
			</view>
		</view>
		<view class="mycenterSaleMain">
			<view class="mycenterSaleMainTime">
				<view class="mycenterSaleMainTimeBox">
					<uni-datetime-picker :end=timeEnd @change="changeStart">
						<input style="font-weight: normal !important;" v-model="startDate" disabled placeholder-class="inputplace" placeholder="请输入开始时间" class="mycenterSaleMainTimeBoxInput" type="text" value="" />
					</uni-datetime-picker>
					
				</view>
				<view class="mycenterSaleMainTimeTxt">
					至
				</view>
				<view class="mycenterSaleMainTimeBox">
					<uni-datetime-picker :start=timeStart @change="changeEnd">
						<input style="font-weight: normal !important;" v-model="endDate" disabled placeholder-class="inputplace" placeholder="请输入结束时间" class="mycenterSaleMainTimeBoxInput" type="text" value="" />
					</uni-datetime-picker>
				</view>
				<!-- <uni-datetime-picker
					value="Date"
					v-model="datetimerange"
					:border=false
					type="daterange"
					:start=timeStart
					:end=timeEnd
					rangeSeparator="至"
				/> -->
			</view>
			<view v-if="list && list.length > 0" class="mycenterSaleMainList">
				<view class="mycenterSaleMainLi" v-for="(item, index) of list" :key="index">
					<view class="mycenterSaleMainLiTop font_blod">
						{{item.parts_name}}
					</view>
					<view class="mycenterSaleMainLiBtm">
						<view class="mycenterSaleMainLiBtmLeft">
							<view class="mycenterSaleMainLiBtmLeftLi">
								<text class="mycenterSaleMainLiBtmLeftLi-title">销售数量</text>
								<text class="mycenterSaleMainLiBtmLeftLi-mh">:</text>
								<view class="mycenterSaleMainLiBtmLeftLi-con">
									<text class="mycenterSaleMainLiBtmLeftLi-con-money">{{item.count}}</text>
									<text class="mycenterSaleMainLiBtmLeftLi-con-unit">{{item.parts_unit}}</text>
								</view>
							</view>
							<view class="mycenterSaleMainLiBtmLeftLi">
								<text class="mycenterSaleMainLiBtmLeftLi-title">销售额</text>
								<text class="mycenterSaleMainLiBtmLeftLi-mh">:</text>
								<view class="mycenterSaleMainLiBtmLeftLi-con">
									<text class="mycenterSaleMainLiBtmLeftLi-con-money">{{item.money}}</text>
									<text class="mycenterSaleMainLiBtmLeftLi-con-unit">元</text>
								</view>
							</view>
						</view>
						<view class="mycenterSaleMainLiBtmRight" @click="cli_goDetails(item, index)">
							查看详情
						</view>
					</view>
				</view>
			</view>
			<view class="mycenterSaleMainList" v-else>
				<view class="yPopNone">
					<image class="yPopNoneImg" src="https://www.zzzsyh.com/applets/agent/factory/23.png" mode=""></image>
					<view class="yPopNoneTxt">
						暂无销售记录
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import allapi from '../api/index.js'
	export default {
		data() {
			return {
				factoryId: uni.getStorageSync('id_factory'),
				list: [],
				startDate: '',
				endDate: '',
				startDateFirst: '',
				endDateFirst: '',
				moneyAll: '',
				timeStart: '',
				timeEnd: '',
				datetimerange: [],
			}
		},
		mounted() {
			this.getFactorySalesVolume()
		},
		methods: {
			// 跳转详情
			cli_goDetails (item, index) {
				let id = item.parts_id
				let startDate = this.startDate
				let endDate = this.endDate
				uni.navigateTo({
					url: '/pages/manufacturers/mycenterSaleDetails/mycenterSaleDetails?id=' + id + '&startDate=' + startDate + '&endDate=' + endDate
				})
			},
			// 处理开始时间
			changeStart (e) {
				let dat = e.split(' ')
				let time = dat[0]
				let timeEnd = this.endDate
				this.startDate = time
				let timeS = Date.parse(time)
				let timeST = Date.parse(timeEnd)
				if (timeS > timeST) {
					this.endDate = time
				}
				this.getFactorySalesVolumeTwo()
			},
			// 处理结束时间
			changeEnd (e) {
				let dat = e.split(' ')
				let time = dat[0]
				this.endDate = time
				let timeStart = this.startDate
				
				let timeS = Date.parse(time)
				let timeST = Date.parse(timeStart)
				if (timeST > timeS) {
					this.startDate = time
				}
				this.getFactorySalesVolumeTwo()
				
			},
			// 获取数据
			getFactorySalesVolume () {
				uni.request({
					url: allapi.getFactorySalesVolume,
					data: {
						factoryId: this.factoryId,
						startDate: this.startDate,
						endDate: this.endDate
					},
					success: (res) => {
						console.log(res);
						let dat = res.data.data
						this.startDate = dat.startDate
						this.endDate = dat.endDate
						this.timeStart = dat.startDate
						this.timeEnd = dat.endDate
						this.startDateFirst = dat.startDate
						this.endDateFirst = dat.endDate
						this.moneyAll = dat.moneyAll
						this.list = dat.list
					}
				})
			},
			getFactorySalesVolumeTwo () {
				uni.request({
					url: allapi.getFactorySalesVolume,
					data: {
						factoryId: this.factoryId,
						startDate: this.startDate,
						endDate: this.endDate
					},
					success: (res) => {
						console.log(res);
						let dat = res.data.data
						this.list = dat.list
					}
				})
			}
		}
	}
</script>

<style scoped>
	.mycenterSale {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		display: flex;
		flex-direction: column;
	}
	.mycenterSaleHead {
		height: 252rpx;
		background-image: url('https://www.zzzsyh.com/applets/agent/factory/8_1.png');
		background-size: 100%;
		background-repeat: no-repeat;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.mycenterSaleHeadBox {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.mycenterSaleHeadBoxHead {
		font-size: 24rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 34rpx;
	}
	.mycenterSaleHeadBoxMoney {
		font-size: 72rpx;
		font-weight: 800;
		color: #FFFFFF;
		line-height: 98rpx;
	}
	.mycenterSaleMain {
		flex: 1;
		border-radius: 32rpx 32rpx 0px 0px;
		margin-top: -50rpx;
		background: #F3F5F7;
		padding-top: 32rpx;
		display: flex;
		flex-direction: column;
	}
	.mycenterSaleMainTime {
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	.mycenterSaleMainTimeBox {
		width: 272rpx;
		height: 96rpx;
		background: #E2F4F5;
		border-radius: 16rpx;
	}
	.mycenterSaleMainTimeTxt {
		font-size: 28rpx;
		color: #666666;
		font-weight: 400;
	}
	.mycenterSaleMainTimeBoxInput {
		text-align: center;
		width: 272rpx;
		height: 96rpx;
		color: #333333;
		font-weight: 400;
		font-size: 28rpx;
	}
	.mycenterSaleMainList {
		flex: 1;
	}
	.mycenterSaleMainLi {
		margin: 24rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 32rpx 28rpx;
	}
	.mycenterSaleMainLiBtm {
		display: flex;
		align-items: center;
	}
	.mycenterSaleMainLiBtmLeft {
		flex: 1;
	}
	.mycenterSaleMainLiBtmLeftLi {
		font-size: 28rpx;
		display: flex;
		color: #333333;
		font-weight: 400;
		align-items: center;
		margin-top: 24rpx;
	}
	.mycenterSaleMainLiBtmLeftLi-title {
		text-align: justify;
		text-align-last: justify;
		display: block;
		width: 120rpx;
	}
	.mycenterSaleMainLiBtmLeftLi-mh {
		margin: 0 5rpx;
	}
	.mycenterSaleMainLiBtmLeftLi-con {
		flex: 1;
		margin-left: 18rpx;
		display: flex;
		align-items: center;
	}
	.mycenterSaleMainLiBtmLeftLi-con-unit {
		margin-left: 10rpx;
	}
	.mycenterSaleMainLiBtmLeftLi-con-money {
		font-size: 36rpx;
	}
	.mycenterSaleMainLiBtmRight {
		width: 144rpx;
		height: 56rpx;
		background: #5DD4D6;
		border-radius: 28rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
